{% if page.callouts %}
{% assign callouts=site.data.[page.callouts] %}
<section
    class="hero {% if callouts.height %} {{ callouts.height }} {% else %} is-medium {% endif %} {{ callouts.style }}">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-multiline is-centered">
                {% for callout in callouts.items %}
                <div class="column is-4 has-text-centered">
                    {% if callout.icon %}
                    <div class="icon callout-icon">
                        {% if callout.icon_brand %}
                        <i class="fab {{ callout.icon }} fa-4x"></i>
                        {% else %}
                        <i class="fas {{ callout.icon }} fa-4x"></i>
                        {% endif %}
                    </div>
                    {% endif %}
                    <p class="title is-4">{{ callout.title }}</p>
                    <p class="subtitle is-6" style="text-align: left;">{{ callout.subtitle }}</p>

                    {% if callout.description %}
                    <div class="content">
                        <p>{{ callout.description | newline_to_br }}</p>
                    </div>
                    {% endif %}

                    {% if callout.call_to_action_name %}
                    <a href="{{ callout.call_to_action_link | relative_url }}" class="button is-primary">
                        {{ callout.call_to_action_name }}
                    </a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}